/**
 * create by young (young2f@outlook.com) on 2020/9/12
 */

'use strict';
import React from 'react';
import {connect} from 'dva/index';
import {Card, Col, DatePicker, Form, Input, Row, Select, Statistic, Table, Tabs} from 'antd';
import ViewTitle from '../../../components/ViewTitle';
import FormBase from '../../../components/Base/FormBase';
import {FormField, ModalView, SearchForm} from 'antd-extra';
import moment from 'moment';
import 'moment/locale/zh-cn';
import styles from '../../index.less';
import ModalPaymentRecordDetail from "../../finance/modal/ModalPaymentRecordDetail";

moment.locale('zh-cn');
const {RangePicker} = DatePicker;
const _ = require('lodash');
const {Option} = Select;
const {TabPane} = Tabs;
const title = '采购单';

@Form.create()
@connect(({
            user,
            global,
            dict,
            vendor,store,finance,
            procure
          }) => ({...user, ...global, ...procure, ...dict,...store,...finance, ...vendor}))
export default class PaymentAssess extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {

    const payload = this.props.form.getFieldsValue();
    _.map(payload, (value, key) => {
      console.log('procure find payload', value);
      if (value === '') {
        payload[key] = undefined;
      }
    });
    payload['table']='Payment';
    this.props.dispatch({
      type: 'finance/findProcureRecordMany',
      payload: {...payload}
    });

    this.props.dispatch({
      type: 'finance/procureRecordAssess',
      payload: {...payload}
    });

    this.props.dispatch && this.props.dispatch({
      type: 'global/getModel',
      payload: {table:'Payment'}
    });
  }

  tableCols() {
    const model = this.props[`PaymentModel`];
    const cols = this.getTableColumns(model);
    cols.push(
      {
        title: '操作', dataIndex: 'opt', fixed: 'right', render: (text, record) => {
          return <div>
            <a style={{marginRight: '6px'}} disabled={record.reviewStatus === '详情'}
               onClick={() => {
                 ModalView.open(ModalPaymentRecordDetail,
                   {
                     title: "付款记录详情",
                     width: '1080px'
                   }, {
                     values: record,
                     model: model,
                     callback: () => this.componentDidMount()
                   });
               }}>详情</a>

          </div>;

        }
      }
    );
    return cols;
  }
  getSearchFields = () => {
    return [
      // <FormField
      //   label="物料名称"
      //   name="name"
      //   key={0}
      // >
      //   <Input allowClear placeholder={`请输入${title}名称`}/>
      // </FormField>,
      // <FormField
      //   label="编码"
      //   name="code"
      //   key={1}
      // >
      //   <Input allowClear placeholder={`请输入${title}编码`}/>
      // </FormField>,
      <FormField
        label="材料类型"
        name="treeName"
        key={4}
      >
        <Select allowClear placeholder="请选择">
          <Option value={'主营业务采购'}>{'主营业务采购'}</Option>
          <Option value={'其它采购'}>{'其它采购'}</Option>

        </Select>
      </FormField>,
      <FormField
        label="供应商"
        name="vendorName"
        key={2}
      >
        <Input allowClear placeholder="请输入供应商"/>
      </FormField>,

      <FormField
        label="创建时间"
        name="createdTs"
        key={3}
        initialValue={[this.getSearchStart1Months(), this.getDefaultSearchEndDate()]}
      >
        <RangePicker allowClear={true}
          // style={{ width: '150%' }}
        />
      </FormField>

    ];
  };

  getCard = () => {
    const {materialLotAssess = []} = this.props;
    const array = [];
    _.map(materialLotAssess, item => {
      const {title, value, color = '#22F', unit} = item;
      array.push(<Col span={4}>
        <Card>
          <Statistic
            title={title}
            value={value}
            precision={2}
            valueStyle={{color: color}}
            suffix={unit}
          />
        </Card>
      </Col>);
    });
    return array;
  };

  render() {
    const {_notify, form, PaymentRecords = [],loading, statistics = {}, isPayReview = false, treeNode = {}} = this.props;

    const {name} = treeNode;
    const {payment = 0} = statistics;
    return <Form className={styles.content}>
      <ViewTitle
        title={`付款支出明细`}
        level={1}
      ></ViewTitle>
      <SearchForm
        style={{marginLeft: '6px', marginRight: '6px'}}
        onSearch={() => {
          this.state.current = 1;
          this.componentDidMount();
        }}
        onReset={this.handleReset}
        cols={3}
        min={6}
        expandText="展开"
        form={form}
      >
        {this.getSearchFields()}
      </SearchForm>
      <div style={{background: '#ECECEC', padding: '30px'}}>
        <Row gutter={16}>
          <Col span={12}>
            <Card>
              <Statistic
                title={`总付款支出统计`}
                value={payment}
                precision={2}
                valueStyle={{color: '#13f'}}
                suffix="元"
              />
            </Card>
          </Col>
        </Row>
      </div>
      <Table
        className={styles.antTable}
        bordered={true}
        // columns={this.getDicTableCols(model, this.onCreateOrEdit, this.onDelete)}
        columns={this.tableCols()}
        dataSource={PaymentRecords}
        scroll={{x: true}}
        pagination={true}
        defaultCurrent={1}
        total={500}
        showSizeChanger
        onShowSizeChange={(current, pageSize) => {
          console.log(current, pageSize);
        }}
      ></Table>
    </Form>
  }
}
